インラインフレームの活用
今週は、ちょっと上級者向けのHTMLテクニックを一つ紹介します。紹介するのは「インラインフレームの活用方法」です。インラインフレームを配置するタグ「IFRAME」を使用すると、ホームページ内に別のホームページを表示できます。

→ インラインフレームの設置
 
ホームページ内に別のホームページを埋め込んで表示したい場合もあると思います。このような場合に利用できるのが「IFRAME」タグ（インラインフレーム）です。インラインフレーム内の内容は、「IFRAME」タグのsrc属性にhtmlファイルやURLを記述して指定します。インラインフレームのサイズは、width属性とheight属性で指定できます。そのほか、align属性を使って文字の回り込みを指定することも可能です。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
このページではインラインフレームを活用しています。<BR><BR>
<IFRAME src="site01.html" width="600" height="400" align="right"></IFRAME>
たとえば、右のインラインフレームには『サイト1』のホームページが表示されています。
</BODY>

</HTML>


→ インラインフレームをリンク先のターゲットにする
 
「IFRAME」タグにname属性を追加してインラインフレームに名前を付けると、リンク先をインラインフレーム内に表示できるようになります。このテクニックを活用すれば、インラインフレーム内に表示させるサイトをクリックで変更する、または自分で作成したHTMLを切り替えて表示する、といったことも実現できるようになります。なお、この場合は「A」タグにtarget属性を追加し、インラインフレームをリンクの表示先に指定するのを忘れないでください。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
このページではインラインフレームを活用しています。<BR>
以下のリンクをクリックすると、そのサイトがインラインフレーム内に表示されます。<BR>
<BR>
<A href="site01.html" target="iframe1">・サイト1</A><BR>
<A href="site02.html" target="iframe1">・サイト2</A><BR>
<A href="site03.html" target="iframe1">・サイト3</A><BR>
<BR>
<IFRAME src="site01.html" name="iframe1" width="600" height="400"></IFRAME>
</BODY>

</HTML>


→ 「IFRAME」タグに用意されている属性設定
 
そのほか、「IFRAME」タグには、以下のような属性設定が用意されています。これらは必要に応じて「IFRAME」タグに追加記述すればよいでしょう。
  • marginwidth／marginheight
    インラインフレーム内の上下左右の余白をピクセル数で指定します。marginwidthが左右の余白、marginheightが上下の余白となります。
  • hspace／vspace
    インラインフレーム外の上下左右の余白をピクセル数で指定します。hspaceが左右の余白、vspaceが上下の余白となります。
  • scrolling
    スクロールバーの表示／非表示を指定します。「auto」でスクロールバーを自動表示、「yes」で常に表示、「no」で常に非表示になります。省略した場合は「auto」に設定されます。
  • frameborder
    フレーム枠の表示／非表示を指定します。「1」でフレーム枠を表示、「0」でフレーム枠が非表示になります。


PC�p�����y�����l���g�����������}�W�������������z �����������O�~�y�������������z Yahoo �y�V NTT-X Store

�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� ���������[�� �C�O���s�����������I �C�O�z�e��